<template>
  <div class="loading-demo">
    <div class="center-demo">
      <zui-loading />
    </div>
    <div class="inline-demo">
      <zui-loading position="inline" />
    </div>
    <div class="msg-demo">
      <zui-loading position="inline" show-msg msg="加载中..." />
    </div>

    <div class="background-demo">
      <zui-loading show-msg msg="加载中..." show-background forbidClick />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const showFullLoading = ref(false)
</script>

<style lang="scss" scoped>
.loading-demo {
  padding: 20px;
  .center-demo {
    position: relative;
    height: 20vh;
    background-color: #ffffff;
  }
  .inline-demo {
    padding: 20px;
    background-color: #ffffff;
    margin-top: 16px;
  }
  .msg-demo {
    margin-top: 16px;
    padding: 20px;
    background-color: #ffffff;
  }
  .background-demo {
    margin-top: 16px;
    position: relative;
    padding: 20px;
    background-color: #ffffff;
    height: 20vh;
  }
}
</style>
